<template>
  <!-- 
    自定义卡片组件 AxiomCard - 固定区域布局架构
    提供左上角、中心、右上角和底部的固定区域布局
  -->
  <div :class="cardClass" v-bind="$attrs" :style="cardStyle">
    <!-- 顶部固定区域 -->
    <div v-if="title || $slots.header || $slots['top-left'] || $slots['top-right']" class="axiom-card__top">
      <!-- 左上角区域 -->
      <div class="axiom-card__top-left">
        <slot name="top-left"></slot>
      </div>
      
      <!-- 中上：标题区域 -->
      <div class="axiom-card__top-center">
        <!-- 
          优先使用 `header` 插槽。
          如果父组件提供了 header 插槽，就渲染插槽内容。
        -->
        <div v-if="$slots.header" class="axiom-card__header">
          <slot name="header"></slot>
        </div>
        <!-- 否则，如果只提供了 `title` prop，就只显示标题。 -->
        <div v-else-if="title" class="axiom-card__header">
          <span class="axiom-card__title">{{ title }}</span>
          <span v-if="subtitle" class="axiom-card__subtitle">{{ subtitle }}</span>
        </div>
      </div>
      
      <!-- 右上角区域 -->
      <div class="axiom-card__top-right">
        <slot name="top-right"></slot>
      </div>
    </div>
    
    <!-- 中间内容区域 -->
    <div class="axiom-card__content">
      <!-- 卡片主体内容区域 -->
      <div class="axiom-card__body">
        <!-- 默认插槽，用于放置卡片的主要内容 -->
        <slot></slot>
      </div>
      
      <!-- 扩展内容区域 -->
      <div v-if="$slots.extra" class="axiom-card__extra">
        <slot name="extra"></slot>
      </div>
    </div>
    
    <!-- 底部固定区域 -->
    <div v-if="$slots.footer || $slots['bottom-left'] || $slots['bottom-right']" class="axiom-card__bottom">
      <!-- 左下角区域 -->
      <div class="axiom-card__bottom-left">
        <slot name="bottom-left"></slot>
      </div>
      
      <!-- 中下：主要操作区域 -->
      <div class="axiom-card__bottom-center">
        <!-- footer 插槽，用于放置卡片底部内容，如按钮等 -->
        <slot name="footer"></slot>
      </div>
      
      <!-- 右下角区域 -->
      <div class="axiom-card__bottom-right">
        <slot name="bottom-right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
// // import { GlobalUtilsMixin } from '@/utils/globalUtils';

export default {
  name: 'AxiomCard',
  // // mixins: [GlobalUtilsMixin],
  inheritAttrs: false,
  props: {
    // `title` prop 用于在卡片头部显示一个简单的文本标题。
    // 如果需要更复杂的头部，应该使用 `header` 插槽。
    title: {
      type: String,
      default: ''
    },
    subtitle: {
      type: String,
      default: ''
    },
    compact: {
      type: Boolean,
      default: false
    },
    hoverable: {
      type: Boolean,
      default: false
    },
    borderedFooter: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: null
    },
    stretch: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click'],
  computed: {
    cardClass() {
      return [
        'axiom-card',
        {
          'axiom-card--compact': this.compact,
          'axiom-card--hoverable': this.hoverable,
          'axiom-card--bordered-footer': this.borderedFooter,
          'axiom-card--stretch': this.stretch
        }
      ];
    },
    cardStyle() {
      const style = {};
      if (this.width) {
        style.width = this.width;
      }
      return style;
    }
  },
  methods: {
    handleClick(event) {
      // this.$logger.debug('卡片被点击', { event });
      this.$emit('click', event);
    }
  },
  created() {
    // 记录组件初始化
    // this.$logger.debug('CCard 组件初始化', { props: this.$props });
  }
};
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-card';
</style>